<template>
  <div class="about">
    <h1>{{count}}</h1>

    <button @click="increment">+1</button>
    <button @click="count = count + 2">+2</button>
  </div>
</template>

<script lang="ts">
import {
  ref
} from 'vue'
export default {

  beforeCreate () {
    console.log('beforeCreate()')
  },

  /* 
  vue3其它的所有组合API函数都在此中调用
  setup中的this为undefined, 不能通过this来读取更新数据
  */
  setup () {
    console.log('setup', this)

    // ref响应式对象: 创建一个响应式数据对象
    // 对象中包含value数据属性
    // 在js中更新/读取: 更新/读取其vlaue属性
    // 在模板中读取/更新: 直接操作ref响应式对象 (解析模板会自动找其value属性操作)
    const count = ref(1)
    console.log(count, count.value)

    const increment = () => {
      count.value = count.value + 1
    }

    // 返回对象中的所有属性和方法, 模板中都可以直接使用
    return {
      count,
      increment
    }
  }
}
</script>